<template>
    <div class="app-container home">
        <div class="station-top">
            <el-row :gutter="12" class="mt5">
                <el-col :span="6">
                    <div class="top-item-box item-box-one" style="display: flex;">
                        <div style="flex:2;height:100%;">
                            <div>入库</div>
                            <div style="text-align:center;margin-top:30px;"><span
                                    style="font-size:26px;font-weight:bold;">{{ sumStatus }}</span>
                            </div>
                        </div>
                        <div style="flex:3;display: flex;flex-direction:column;justify-content:space-evenly">
                            <div>未发货：{{ status1 }}</div>
                            <div>在途中：{{ status3 }}</div>
                            <div>部分入库：{{ status4 }}</div>
                            <div>入库完成：{{ status5 }} </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="top-item-box item-box-two" style="display: flex;">
                        <div style="flex:2;height:100%;">
                            <div>出库</div>
                            <div style="text-align:center;margin-top:30px;"><span
                                    style="font-size:26px;font-weight:bold;">{{ ChuZongzhi }}</span></div>
                        </div>
                        <div style="flex:3;display: flex;flex-direction:column;justify-content:space-evenly">
                            <div>未出库：{{WeiChuku}}</div>
                            <div>在途中：{{Zaituzhong}}</div>
                            <div>部分出库：{{BuFenChuku}}</div>
                            <div>出库完成：{{ChuKuWanCheng}}</div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="top-item-box item-box-three" style="display: flex;">
                        <div style="flex:2;height:100%;">
                            <div>其他</div>
                            <div style="text-align:center;margin-top:30px;"><span
                                    style="font-size:26px;font-weight:bold;">15</span></div>
                        </div>
                        <div style="flex:3;display: flex;flex-direction:column;justify-content:space-evenly">
                            <div>待截单：5</div>
                            <div>异常单：5</div>
                            <div>今日到货：5</div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="top-item-box item-box-four" style="display: flex;">
                        <div style="flex:2;height:100%;">
                            <div>库存预警</div>
                            <div style="text-align:center;margin-top:30px;"><span
                                    style="font-size:26px;font-weight:bold;">{{sumId}}</span>
                            </div>
                        </div>
                        <div style="flex:3;display: flex;flex-direction:column;justify-content:space-evenly">
                            <div>岳麓仓：{{id1}}</div>
                            <div>望城仓：{{id2}}</div>
                            <div>长沙县：{{id3}}</div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="station-middle">
            <el-row :gutter="12">
                <el-col :span="6">
                    <el-card class="box-card" shadow="never">
                        <div class="card-title">仓库货物占比</div>
                        <div style="height: calc(100% - 30px);">
                            <StationPie height="100%"></StationPie>
                            <div></div>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="18">
                    <el-card class="box-card" shadow="never">
                        <div style="display:flex;justify-content: space-between;align-items: center;">
                            <div class="card-title">入库趋势</div>
                            <el-radio-group v-model="tabPosition" @change="dateChange">
                                <!-- <el-radio-button label="day">当日</el-radio-button> -->
                                <el-radio-button label="month">本月</el-radio-button>
                                <el-radio-button label="year">今年</el-radio-button>
                            </el-radio-group>
                        </div>
                        <div style="height: calc(100% - 30px);">
                            <StationBar height="100%" :chartData="barChartData" :xName="barXName" />
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
        <div class="station-bottom">
            <el-row :gutter="12">
                <el-col :span="6">
                    <el-card class="box-card" shadow="never">
                        <div class="card-title">近7日销售出库</div>
                        <div style="height: calc(100% - 30px);">
                            <StationLine height="100%" itemColor="#ee4368" yName="件" :chartData="lineDataOne" />
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card class="box-card" shadow="never">
                        <div class="card-title">近7日外协出库</div>
                        <div style="height: calc(100% - 30px);">
                            <StationLine height="100%" :chartData="lineDataTwo" yName="件" itemColor="#5470c6" />
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card class="box-card" shadow="never">
                        <div class="card-title">近7日移库</div>
                        <div style="height: calc(100% - 30px);">
                            <StationLine height="100%" :chartData="lineDataThree" yName="件" itemColor="#c58bea" />
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card class="box-card" shadow="never">
                        <div class="card-title">近7日退货入库</div>
                        <div style="height: calc(100% - 30px);">
                            <StationLine height="100%" yName="件" :chartData="lineDataFour" itemColor="#c7a428" />
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script setup>
import { selectStatus, selectDate } from "@/api/wms/order";
import{selectByHouseId} from "@/api/wms/history";
import StationPie from '@/components/echart/StationPie.vue'
import StationLine from '@/components/echart/StationLine.vue'
import StationBar from '@/components/echart/StationBar.vue'
import { onMounted, ref } from 'vue'
import moment from 'moment';
import { selectStatusChuku } from "@/api/wms/orderdetail";

const tabPosition = ref('month')
const barChartData = ref({
    yData: [79, 68, 56, 72, 51, 63, 67, 71, 58, 81, 64, 77, 56, 69]
})
const barXName = ref('日')
const lineDataOne = ref({
    yData: [79, 65, 21, 67, 21, 89, 56],
})
const lineDataTwo = ref({
    yData: [45, 72, 16, 37, 64, 28, 46],
})
const lineDataThree = ref(
    {
        yData: [16, 27, 37, 16, 27, 21, 11],
    }
)
const lineDataFour = ref({
    yData: [134, 107, 94, 173, 37, 143, 86],
})

const status1 = ref(0)
const status3 = ref(0)
const status4 = ref(0)
const status5 = ref(0)
const sumStatus = ref(0)
//出库看板定义
const WeiChuku=ref(0)
const Zaituzhong=ref(0)
const BuFenChuku=ref(0)
const ChuKuWanCheng=ref(0)
const ChuZongzhi=ref(0)
//库存
const id1 = ref(0)
const id2 = ref(0)
const id3 = ref(0)
const sumId = ref(0)
onMounted((() => {
    initTime();
    dateChange('month');
    //入库
    //未发货
    selectStatus(1).then(response => {
        status1.value = response.data
        sumStatus.value += status1.value
    })
    //在途中
    selectStatus(3).then(response => {
        status3.value = response.data
        sumStatus.value += status3.value
    })
    //部分入库
    selectStatus(4).then(response => {
        status4.value = response.data
        sumStatus.value += status4.value
    })
    //入库完成
    selectStatus(5).then(response => {
        status5.value = response.data
        sumStatus.value += status5.value
    })
    //仓库
    selectByHouseId(2).then(response =>{
        id1.value = response.data
        sumId.value += id1.value
    })
     selectByHouseId(456).then(response =>{
        id2.value = response.data
        sumId.value += id2.value
    })
     selectByHouseId(9).then(response =>{
        id3.value = response.data
        sumId.value += id3.value
    })
   
}))
    //未出库
    selectStatusChuku(1).then(response=>{
       WeiChuku.value=response.data
       ChuZongzhi.value += WeiChuku.value
       console.log(ChuZongzhi.value)
    })
    //出库在途中
     selectStatusChuku(2).then(response=>{
       Zaituzhong.value=response.data
       ChuZongzhi.value+=Zaituzhong.value
    })
      //部分出库
     selectStatusChuku(3).then(response=>{
       BuFenChuku.value=response.data
       ChuZongzhi.value+=BuFenChuku.value
    })
       //出库
     selectStatusChuku(4).then(response=>{
       ChuKuWanCheng.value=response.data
       ChuZongzhi.value+=ChuKuWanCheng.value
    })
// 时间类型选择
async function dateChange(value) {
    let date = new Date()
    let month = date.getMonth() + 1
    let day = date.getDate()
    let barXData = []
    let barYData = []
    if (value === 'year') {
        for (let i = 0; i < month; i++) {
            barXData.push(moment().subtract(i, 'months').format('YYYY-MM'))
            barYData.push(Math.floor(Math.random() * (180 - 120 + 1)) + 120)
        }
        console.log(barYData);
        
        barXName.value = '月'
    } else {
        let sumDate = []
        for (let i = 0; i < day; i++) {
            barXData.push(moment().subtract(i, 'days').format('MM-DD'))
            if (i == 0) {
                sumDate.push(moment().subtract(i, 'days').format('YYYY-MM-DD'))
            }
            if (i == day - 1) {
                sumDate.push(moment().subtract(i, 'days').format('YYYY-MM-DD'))
            }
            if (typeof sumDate[1] === 'undefined') {
                console.log(sumDate);
                barYData.push(0)
            } else {
                
                await selectDate(sumDate[1], addOneDay(sumDate[0])).then(response => {
                    const days = response.data.map(item => moment(item.date).date());
                    console.log(days);
                    barYData.push(0)
                    for (let j = 0; j < days.length; j++) {
                        barYData[days[j]-1]=response.data[j].total_count
                    }
                })
            }
        }
        barXName.value = '日'
    }
    barChartData.value = {
        xData: barXData.reverse(),
        yData: barYData
    }
}


function addOneDay(dateStr) {
  const millisecondsInOneDay = 86400000;
  const date = new Date(dateStr);
  date.setTime(date.getTime() + millisecondsInOneDay);
  return date.toISOString().split('T')[0]; // 返回YYYY-MM-DD格式的字符串
}
// 初始化时间模拟数据
function initTime() {
    let lineXData = []
    for (let i = 0; i < 7; i++) {
        lineXData.push(moment().subtract(i, 'days').format('MM-DD'))
    }
    lineXData = lineXData.reverse()
    lineDataOne.value.xData = lineXData
    lineDataTwo.value.xData = lineXData
    lineDataThree.value.xData = lineXData
    lineDataFour.value.xData = lineXData
}


</script>


<style scoped>
.app-container {
    min-height: calc(100vh - 84px);
    padding: 12px 12px 0 12px;
}

.top-item-box {
    height: 160px;
    background: #fff;
    margin-bottom: 12px;
    border-radius: 12px;
    color: #fff;
    padding: 16px;
}

.item-box-one {
    background: linear-gradient(30deg, #1a94db, #4db1eb, #7acaf9);
    box-shadow: 0 4px 12px #8ed2fa;
}

.item-box-two {
    background: linear-gradient(30deg, #c7a327, #d5ba47, #e3cf65);
    box-shadow: 0 4px 12px #ece7cd;
}

.item-box-three {
    background: linear-gradient(30deg, #6365f7, #9177f1, #cd8ee9);
    box-shadow: 0 4px 12px #dcc9e6;
}

.item-box-four {
    background: linear-gradient(30deg, #ed3a60, #f1557a, #f67da0);
    box-shadow: 0 4px 12px #e7cfd6;
}

.box-card {
    height: 400px;
    margin-bottom: 12px;
    background-color: #fff;
    border-color: #ebe6f5;
}

.box-card>>>.el-card__body {
    height: 100%;
}

.card-title {
    font-weight: bold;
    height: 30px;
    display: flex;
    align-items: center;
}

.card-title::before {
    content: '';
    height: 70%;
    width: 5px;
    background: #3671e8;
    margin-right: 8px;
}
</style>